<template>
  <el-dialog title="功率图"
             :close-on-click-modal="false"
             :visible.sync="visible"
             @close="close"
             width="70%">
    <div id="chartLineBox" style="width: 90%;height: 400px;"></div>
  </el-dialog>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'powerDiagram',
    data () {
      return {
        orderNumber: '',
        visible: false,
        chartLine: null
      }
    },

    mounted () {
      console.log(11111)
    },

    methods: {
      init (orderNumber) {
        this.orderNumber = orderNumber
        this.visible = true
        this.$nextTick(() => {
          this.getOrderDetail()
        })
      },

      getOrderDetail () {
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/order/detail'),
          method: 'get',
          params: this.$http.adornParams({
            orderNumber: this.orderNumber
          })
        }).then(({ data }) => {
          console.log(data)
          this.initChart(data.data)
        })
      },

      close () {
        this.visible = false
      },
      initChart (data) {
        this.chartLine = echarts.init(document.getElementById('chartLineBox'))
        let xData = []
        let yData = []
        data.forEach((item) => {
          xData.push(item.createDate)
          yData.push(item.power)
        })
        var option = {
          tooltip: {              //设置tip提示
            trigger: 'axis'
          },

          legend: {               //设置区分（哪条线属于什么）
            data: ['功率']
          },
          color: ['#8AE09F'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
          xAxis: {                //设置x轴
            type: 'category',
            boundaryGap: false,     //坐标轴两边不留白
            data: xData,
            name: '时间',           //X轴 name
            nameTextStyle: {        //坐标轴名称的文字样式
              color: '#FA6F53',
              fontSize: 16,
              padding: [0, 0, 0, 20]
            },
            axisLine: {             //坐标轴轴线相关设置。
              lineStyle: {
                color: '#FA6F53',
              }
            },
            axisLabel: {
              interval: xData.length>=6?3:0
            }
          },
          yAxis: {
            name: '功率',
            max: function (value) {
              return 250
            },
            nameTextStyle: {
              color: '#FA6F53',
              fontSize: 16,
              padding: [0, 0, 10, 0]
            },
            axisLine: {
              lineStyle: {
                color: '#FA6F53',
              }
            },
            type: 'value'
          },
          series: [
            {
              name: '功率',
              data: yData,
              type: 'line',               // 类型为折线图
              lineStyle: {                // 线条样式 => 必须使用normal属性
                normal: {
                  color: '#8AE09F',
                }
              },
            }
          ]
        }
        this.chartLine.setOption(option)
      }
    }
  }
</script>

<style scoped>

</style>
